<template>
  <div style="margin:  24px 0 ">
    <!-- 业务提成 -->
    <a-row>
      <a-col
        :offset="16"
        :md="8">
        <div style="float: right; margin: 0 60px 20px 0;">
          <a-button
            @click="handleEdit"
            v-if="!isEdit"
            style="margin-right: 10px">编辑</a-button>
          <a-button
            @click="() => { this.isEdit = false }"
            v-if="isEdit"
            style="margin-right: 10px">取消</a-button>
          <a-button
            type="primary"
            @click="handleSubmit">提交</a-button>
        </div>
      </a-col>
    </a-row>
    <a-card
      :title="title"
      v-if="job1 === 1">
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">合同额</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">项目毛利率</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">毛利额</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">实际毛利提成比例</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">毛利奖金额</a-card-grid>
      <a-card-grid
        :style="job2 === 2 ? 'width: 10%;height: 80px; text-align: center': 'width: 15%;height: 80px; text-align: center'"
        :hoverable="false">固定提成额</a-card-grid>
      <a-card-grid
        :style="job2 === 2 ? 'width: 10%;height: 80px; text-align: center': 'width: 15%;height: 80px; text-align: center'"
        :hoverable="false">总业务费</a-card-grid>
      <a-card-grid
        v-if="job2 === 2"
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">信息费</a-card-grid>

      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoney"
              placeholder="请输入合同额(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoney) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="inputgrossRate"
              placeholder="请输入毛利率(%)" />
          </div>
          <span v-show="!isEdit">{{ showRate(grossRate) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(grossMoney) }}</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">{{ showRate(grossRateRes ? grossRateRes * 100 : undefined ) }}</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(grossReward) }}</a-card-grid>
      <a-card-grid
        :style="job2 === 2 ? 'width: 10%;height: 80px; text-align: center': 'width: 15%;height: 80px; text-align: center'"
        :hoverable="false">{{ showMonney(fixReward) }}</a-card-grid>
      <a-card-grid
        :style="job2 === 2 ? 'width: 10%;height: 80px; text-align: center': 'width: 15%;height: 80px; text-align: center'"
        :hoverable="false">{{ showMonney(totalReward) }}</a-card-grid>
      <a-card-grid
        v-if="job2 === 2"
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(infoReward) }}</a-card-grid>
    </a-card>
    <!-- 工程提成 -->
    <a-card
      :title="title"
      v-if="job1 === 2">
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">合同额</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">硬件合同额</a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">软件合同额</a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">项目毛利率</a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">毛利额</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">净利额</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">硬件提成</a-card-grid>
      <a-card-grid
        :style="'width: 5%;height: 80px; text-align: center'"
        :hoverable="false">软件提成</a-card-grid>
      <a-card-grid
        :style="'width: 5%;height: 80px; text-align: center'"
        :hoverable="false">项目经理毛利奖金</a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">项目组毛利奖金</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">项目组固定提成</a-card-grid>

      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoney"
              placeholder="请输入合同额(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoney) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoneyHardware"
              placeholder="请输入合同额-硬件部分(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoneyHardware) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 15%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoneySoftware"
              placeholder="请输入合同额-软件部分(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoneySoftware) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="inputgrossRate"
              placeholder="请输入项目毛利率(%)" />
          </div>
          <span v-show="!isEdit">{{ showRate(grossRate) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(grossMoney) }}</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(netGrossMoney) }}</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(hardwareReward) }}</a-card-grid>
      <a-card-grid
        :style="'width: 5%;height: 80px; text-align: center'"
        :hoverable="false">{{ showMonney(softwareReward) }}</a-card-grid>
      <a-card-grid
        :style="'width: 5%;height: 80px; text-align: center'"
        :hoverable="false">{{ showMonney(projectManagerGrossReward) }}</a-card-grid>
      <a-card-grid
        style="width: 5%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(projectGrossReward) }}</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(projectFixReward) }}</a-card-grid>

    </a-card>
    <!-- 生产提成 -->
    <a-card
      :title="title"
      v-if="job1 === 3">
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">合同额</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">项目毛利率</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">策划组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">UI设计、动效创意组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">程序组奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">内容组(定制软件)奖金</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">硬件开发组(定制硬件)奖金</a-card-grid>

      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="isEdit"
            style="left: -10px; width: 90%; top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :precision="2"
              v-model="inputcontractMoney"
              placeholder="请输入合同额(¥)" />
          </div>
          <span v-show="!isEdit">{{ showMonney(contractMoney) }}</span>
        </div>
      </a-card-grid>

      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">{{ showRate(rewardRate) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward) }}</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ showMonney(reward) }}</a-card-grid>
    </a-card>
  </div>
</template>
<script>
import { showRate, showMonney } from './config'
import { simulationPerformance } from '@/api/performanceConfig'

export default {
  name: 'DemoCard',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    job1: {
      type: [Number, String],
      default: () => {}
    },
    job2: {
      type: [Number, String],
      default: () => {}
    },
    performanceConfigId: {
      type: [Number, String],
      default: () => {}
    }
  },
  watch: {
    performanceConfigId: function (performanceConfigId) {
      if (performanceConfigId) {
          this.simulation({
            contractMoney: 100000,
            grossRate: 0.1,
            contractMoneyHardware: 50000,
            contractMoneySoftware: 50000
          })
      }
    }
  },
  mounted () {
  },
  data () {
    this.showRate = showRate
    this.showMonney = showMonney
    // 		  contractMoney:合同额(*)
    // contractMoneyHardware:合同额-硬件部分(仅用来模拟项目经理绩效)
    // contractMoneySoftware:合同额-软件部分(仅用来模拟项目经理绩效)
    // grossRate:项目毛利率(项目毛利率不能超过100%)
    return {
      inputcontractMoney: 0,
      inputcontractMoneyHardware: 0,
      inputcontractMoneySoftware: 0,
      inputgrossRate: 0,

      contractMoney: 0,
      contractMoneyHardware: 0,
      contractMoneySoftware: 0,
      grossRate: 0,
      isEdit: false,
      // 模拟结果 业务员
      //  grossMoney:毛利额 grossRate:实际毛利提成比例 grossReward:毛利奖金额 fixReward:固定提成额
      // totalReward:总业务费  infoReward:信息费
      // 工程
      // netGrossMoney:净利额
      //   hardwareReward:硬件提成
      //   softwareReward:软件提成
      //   projectManagerGrossReward:项目经理毛利奖金
      //   projectGrossReward:项目组毛利奖金
      //   totalIncome:项目总收入
      //   projectFixReward： 项目组固定提成
      // 生产
      // rewardRate:考核后比例
      // reward:考核后奖金
      projectFixReward: undefined,
      grossMoney: undefined,
      // 和入参冲突，要转换
      grossRateRes: undefined,
      grossReward: undefined,
      fixReward: undefined,
      totalReward: undefined,
      infoReward: undefined,
      // 工程部分
      // grossMoney:毛利额
      netGrossMoney: undefined,
      hardwareReward: undefined,
      softwareReward: undefined,
      projectManagerGrossReward: undefined,
      projectGrossReward: undefined,
      totalIncome: undefined,
      // 生产部分
      rewardRate: undefined,
      reward: undefined
    }
  },
  methods: {
    simulation (param) {
      simulationPerformance({ ...param, performanceConfigId: this.performanceConfigId }).then(res => {
        this.contractMoney = param.contractMoney
        this.contractMoneyHardware = param.contractMoneyHardware
        this.contractMoneySoftware = param.contractMoneySoftware
        this.grossRate = param.grossRate * 100
        //  业务提成
        const { grossMoney, grossRate, grossReward, fixReward, totalReward, infoReward } = res.data || {}
        this.grossMoney = grossMoney
        // grossRateRes 和入参冲突，要转换
        this.grossRateRes = grossRate
        this.grossReward = grossReward
        this.fixReward = fixReward
        this.totalReward = totalReward
        this.infoReward = infoReward
        // 工程提成
        const {
          netGrossMoney,
          hardwareReward,
          softwareReward,
          projectManagerGrossReward,
          projectGrossReward,
          totalIncome,
          projectFixReward
        } = res.data || {}
        this.netGrossMoney = netGrossMoney
        this.hardwareReward = hardwareReward
        this.softwareReward = softwareReward
        this.projectManagerGrossReward = projectManagerGrossReward
        this.projectGrossReward = projectGrossReward
        this.totalIncome = totalIncome
        this.projectFixReward = projectFixReward
        // 生产提成
        const { reward, rewardRate } = res.data || {}
        this.reward = reward
        this.rewardRate = rewardRate * 100
        this.isEdit = false
      })
    },
    handleEdit () {
      if (this.performanceConfigId) {
        this.isEdit = true
        // 回填合同额和比例
        this.inputcontractMoney = this.contractMoney
        this.inputgrossRate = this.grossRate
        // 硬件软件
        this.inputcontractMoneyHardware = this.contractMoneyHardware
        this.inputcontractMoneySoftware = this.contractMoneySoftware
      } else {
        this.$message.error('先提交正确的业绩规则')
      }
    },
    handleSubmit () {
      if (this.isEdit) {
        const contractMoney = this.inputcontractMoney
        const contractMoneyHardware = this.inputcontractMoneyHardware
        const contractMoneySoftware = this.inputcontractMoneySoftware
        const grossRate = this.inputgrossRate
        if (
          (contractMoney || this.job1 === 3) ||
          (contractMoney && grossRate) ||
          (this.job1 === 2 && contractMoney && contractMoneyHardware && contractMoneySoftware && grossRate)
        ) {
          this.simulation({ contractMoney, contractMoneySoftware, contractMoneyHardware, grossRate: grossRate ? grossRate / 100 : undefined })
        } else {
          this.$message.error('参数不全')
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-input-number {
  width: 100%;
}
/deep/.ant-input-number-handler-wrap {
  display: none;
}
</style>
